<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 导入表格需要的包 -->
  <script src="https://cdn.staticfile.org/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
  <script src="https://cdn.staticfile.org/xlsx/0.14.1/xlsx.full.min.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
  <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.2.1-rc1/echarts.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">

    <el-upload :show-file-list="false" action="action" :on-change="handleChange">
      <el-button type="primary">上传 excel</el-button>
    </el-upload>
    <el-button type="primary" @click="handleExcel">下载 excel</el-button>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {}
    },
    mounted() {
    },
    methods: {
      handleChange(file, fileLis) {
        this.$export.xlsx(file.raw)
          .then(data => {
            console.log(data)
          })
      },
      handleExcel() {
        let opt = {
          title: '文档标题',
          column: [{
            label: '标题',
            prop: 'title'
          }],
          data: [{
            title: "测试数据1"
          }, {
            title: "测试数据2"
          }]
        }
        this.$export.excel({
          title: opt.title || new Date().getTime(),
          columns: opt.column,
          data: opt.data
        });
      }
    }
  })

</script>

</html>